<template>
	<div class="goods_list table-theme">
		<head-title title="商品--定制商品列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="styleList"
						:value="style_id"
						placeholder="风格分类"
						type="style_id"
						@value="setSelectValue"
						label-name="style_name"
						value-name="style_id"
					>
					</select-view>
					<select-view
						:option-list="spaceList"
						:value="space_id"
						placeholder="空间"
						type="space_id"
						@value="setSelectValue"
						label-name="space_name"
						value-name="space_id"
					>
					</select-view>
					<select-view
						:option-list="classList"
						:value="class_id"
						placeholder="品类"
						type="class_id"
						@value="setSelectValue"
						label-name="class_name"
						value-name="class_id"
					>
					</select-view>
					<select-view
						:option-list="statusList"
						:value="is_sale"
						placeholder="上下架"
						type="is_sale"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="goodsType"
						:value="is_goods"
						placeholder="单品/套餐"
						type="is_goods"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="orderByList"
						:value="order_by"
						placeholder="排序"
						type="order_by"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="goodsTypeList"
						:value="goods_type"
						placeholder="排序"
						type="goods_type"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					<div class="add" style="margin-top: 5px;margin-right: 10px;" v-if="admin_type == 1">
						<el-button type="primary" size="small" @click="exportDialog">商品导出</el-button>
					</div>
				</div>
			</div>
			<div class="btn-group">
				<div v-if="admin_id == 1" class="btn-item">
					<el-button type="primary" size="small" @click="upDown(2)">批量下架</el-button>
				</div>
				<div v-if="admin_id == 1" class="btn-item">
					<el-button type="primary" size="small" @click="upDown(1)">批量上架</el-button>
				</div>
				<div v-if="admin_id == 1" class="btn-item">
					<el-button type="danger" size="small" @click="del(1)">批量删除</el-button>
				</div>
				<div v-if="admin_type == 2" class="btn-item">
					<el-button type="primary" size="small" @click="AddMyGoods()">添加为我的平台商品</el-button>
				</div>
			</div>
			<p class="data-number">总商品数：{{ total }}</p>
			<el-table :data="goodsList" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				
				<el-table-column label="序号" align="center" prop="goods_id"></el-table-column>
				<el-table-column label="工厂代号" align="center" prop="factory_sn" v-if="admin_id == 1"></el-table-column>
				<el-table-column label="工厂货号" align="center" prop="lining_sn"></el-table-column>
				<el-table-column label="型号" align="center" prop="goods_sn"></el-table-column>
				<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="空间" align="center" prop="space_name"></el-table-column>

				<el-table-column label="风格" align="center" prop="style_name"></el-table-column>
				<el-table-column label="品类" align="center" prop="class_name"></el-table-column>
				<el-table-column label="销量" align="center" prop="number"></el-table-column>
				<el-table-column label="零售价" align="center" prop="retail_price" v-if="admin_type == 1"></el-table-column>
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center" v-if="admin_type == 1 || admin_id == 3">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_sale" :active-value="1" :inactive-value="2" @change="upDown(0, $event, scope.row.goods_id, scope.row.is_examine)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="" width="100" v-if="admin_type == 1">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort" placeholder="" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
						 @keyup.enter.native="postSort(scope.row.sort, scope.row.goods_id)" @blur="postSort(scope.row.sort, scope.row.goods_id)"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button v-if="scope.row.is_customized == 1" type="primary" size="mini" @click="goodsCustomized(scope.$index,0,scope.row.goods_id)">取消定制</el-button>
						<el-button v-if="scope.row.is_customized == 0" type="primary" size="mini" @click="goodsCustomized(scope.$index,1,scope.row.goods_id)">设为定制</el-button>
						<el-button type="primary" size="mini" @click="goodsDetails(scope.row.goods_id)">详情</el-button>
						<el-button style="margin-left:0;margin-top:10px" type="primary" size="mini" @click="GoodsCopy(scope.row.goods_id)" v-if="admin_id == 1 || admin_id == 6 || admin_id ==9">复制产品</el-button>
						<el-button style="margin-top:10px" type="primary" size="mini" @click="edit(scope.row.goods_id, scope.row.is_examine)" v-if="admin_type == 1 || admin_id == 3">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>


		<el-dialog title="数据条数" :close-on-click-modal="false" :visible.sync="dialogVisible" center :modal-append-to-body="false"
		 width="480px">
			<el-input v-model="limit" placeholder="请输入数据条数" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="offlineExport">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="下架备注" :close-on-click-modal="false" :visible.sync="remarkDialogVisible" center :modal-append-to-body="false" width="480px" @closed="onCloseRemark">
			<el-form :model="upDownForm" :rules="upDownFormRules" ref="upDownForm" label-width="100px">
				<el-form-item label="备注：" prop="remarks">
					<el-input v-model="upDownForm.remarks"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="remarkDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitUpDowmForm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			SelectView
		},
		name: 'goods_list',
		data() {
			return {
				limit: 10,
				dialogVisible: false,
				goods_type: 1,
				goodsListType: 0,
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				goodsList: [], // 商品列表
				total: 0,
				style_id: '', // 风格
				space_id: '', // 空间
				class_id: '', // 品类
				is_sale: 1, // 上下架
				is_goods: 1, // 单品或者套餐
				order_by: 1, // 排序
				page: 0,
				styleList: [],
				spaceList: [],
				classList: [],
				multipleSelection: [],
				setSortForm: {
					sort: '',
					goods_id: ''
				},
				is_customized: 1,
				remarkDialogVisible:false,
				upDownForm:{
					goods_id:"",
					is_sale:"",
					remarks:""
				},
				upDownFormRules:{
					remarks:[{required:true,message:'请输入备注'}]
				},
				type:0,
				searchOption: [
					{
						value: 0,
						label: "型号",
					},
					{
						value: 1,
						label: "商品ID",
					},
					{
						value: 2,
						label: "商品名",
					},
					{
						value: 3,
						label: "工厂代号"
					},
					{
						value: 4,
						label: "工厂货号"
					},
					{
						value: 5,
						label: "商品编号"
					}
				],
				classSelect: 0,
				selectContent: "",
				statusList:[
					{
						value:1,
						label:'上架'
					},
					{
						value:2,
						label:'下架'
					}
				],
				goodsType:[
					{
						value:1,
						label:'单品'
					},
					{
						value:2,
						label:'套餐'
					}
				],
				orderByList:[
					{
						value:1,
						label:'时间'
					},
					{
						value:2,
						label:'大小'
					},
					{
						value:3,
						label:'序号'
					}
				],
				goodsTypeList:[
					{
						value:1,
						label:'普通商品'
					},
					{
						value:7,
						label:'活动商品'
					}
				]
			};
		},
		watch: {
			// total: {
			// 	handler: function(newVal) {
			// 		console.log(newVal)
			// 	},
			// 	deep: true
			// },
		},
		methods: {
			getGoods() {
				let id = this.$route.query.id;
				if (id != undefined) {
					this.classSelect = '2';
					this.selectContent = id;
				}
			},
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					style_id: this.style_id,
					space_id: this.space_id,
					class_id: this.class_id,
					is_sale: this.is_sale,
					is_goods: this.is_goods,
					store_id: 1,
					goods_type: this.goods_type,
					is_customized: this.is_customized
				};

				if (this.order_by == 1) {
					data.order_by = 'add_time';
				} else if (this.order_by == 2) {
					data.order_by = 'sort';
				} else if (this.order_by == 3) {
					data.order_by = 'goods_id';
				}

				if (this.admin_id == 3) {
					data.factory_id = localStorage.getItem('factory_id');
					data.factory_sn = localStorage.getItem('factory_sn');
				}

				if (this.style_id == 0) {
					delete data.style_id;
				}
				if (this.space_id == 0) {
					delete data.space_id;
				}
				if (this.class_id == 0) {
					delete data.class_id;
				}

				if (this.classSelect == 0) {
					data.keyword = this.selectContent;
				} else if (this.classSelect == 1) {
					data.goods_id = this.selectContent;
				} else if (this.classSelect == 2) {
					data.keyword = this.selectContent;
				} else if (this.classSelect == 3) {
					data.factory_sn = this.selectContent;
				} else if (this.classSelect == 4) {
					data.lining_sn = this.selectContent;
				} else if (this.classSelect == 5) {
					data.goods_sn = this.selectContent;
				}

				this.$http(this.$ApiList.GoodsList, data).then(res => {
					this.goodsList = [];
					res.datas.data.forEach(item => {
						this.goodsList.push(item);
					});
					this.total = res.datas.count;
				});
			},

			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			selectType() {
				this.init();
			},
			// 上下架
			upDown(type, e, id, is_examine) {
				let data;
				this.type = type;
				if (type == 0) {
					data = {
						goods_id: id,
						is_sale: e
					};
					this.upDownForm.goods_id = id;
					this.upDownForm.is_sale = e;
					this.upDownForm.remarks = '';
					if (this.admin_id == 3) {
						if (is_examine == 1) {
							this.$layer.msg('该商品在审核中，禁止重复修改');
							return;
						}
						if(e == 2){
							this.remarkDialogVisible = true;
						}else if(e == 1){
							let fdata = {
								factory_id: localStorage.getItem('factory_id'),
								goods_id: id,
								is_sale: e
							};
							this.$http(this.$ApiList.FactoryOnSale, fdata).then(res => {
								this.$layer.msg(res.datas);
								this.page = 1;
								this.init();
							});
						}
					} else {
						if(e == 2){
							this.remarkDialogVisible = true;
						}else if(e == 1){
							let pdata = {
								goods_id: id,
								is_sale: e
							};
							this.$http(this.$ApiList.GoodsDown, pdata).then(res => {
								this.$layer.msg('操作成功');
							});
						}
					}
				} else if (type == 1) {
					if (this.multipleSelection.length == 0) {
						return;
					}
					data = {
						goods_id: '',
						is_sale: 1
					};
					this.multipleSelection.forEach(item => {
						data.goods_id += item.goods_id + ',';
					});
					data.goods_id = data.goods_id.substr(0, data.goods_id.length - 1);
					this.$http(this.$ApiList.GoodsDown, data).then(res => {
						this.$layer.msg('操作成功');
						this.page = 1;
						this.init();
					});
				} else if (type == 2) {
					if (this.multipleSelection.length == 0) {
						return;
					}
					data = {
						goods_id: '',
						is_sale: 2
					};
					this.multipleSelection.forEach(item => {
						data.goods_id += item.goods_id + ',';
					});
					data.goods_id = data.goods_id.substr(0, data.goods_id.length - 1);
					this.$http(this.$ApiList.GoodsDown, data).then(res => {
						this.$layer.msg('操作成功');
						this.page = 1;
						this.init();
					});
				}
			},
			// 提交上下架
			submitUpDowmForm(){
				if(!this.upDownForm.remarks){
					this.$message.error('请填写备注');
					return;
				}
				if(this.type == 0){
					if(this.admin_id == 3){
						let data = {
							...this.upDownForm,
							factory_id:localStorage.getItem('factory_id')
						}
						this.$http(this.$ApiList.FactoryOnSale, data).then(res => {
							this.$layer.msg(res.datas);
							this.init(this.page);
							this.remarkDialogVisible = false;
						});
					}else{
						this.$http(this.$ApiList.GoodsDown, this.upDownForm).then(res => {
							this.$layer.msg(res.datas);
							this.init(this.page);
							this.remarkDialogVisible = false;
						});
					}
				}else if(this.type == 2){
					let data = {
						goods_id: '',
						is_sale: 2,
						remarks:this.upDownForm.remarks
					};
					this.multipleSelection.forEach(item => {
						data.goods_id += item.goods_id + ',';
					});
					data.goods_id = data.goods_id.substr(0, data.goods_id.length - 1);
					this.$http(this.$ApiList.GoodsDown, data).then(res => {
						this.$layer.msg(res.datas);
						this.page = 1;
						this.init();
						this.remarkDialogVisible = false;
					});
				}
			},
			// 关闭
			onCloseRemark(){
				this.remarkDialogVisible = false;
				if(this.type == 0){
					let goods_id = this.upDownForm.goods_id;
					this.goodsList.forEach((item,index)=>{
						if(item.goods_id == goods_id){
							if(item.is_sale == 2){
								this.$set(this.goodsList[index],'is_sale',1)
							}else{
								this.$set(this.goodsList[index],'is_sale',2)
							}
						}
					})
					
				}
			},
			refreshPage() {
				this.is_sale = '1';
				this.page = 1;
				this.style_id = '';
				this.selectContent = '';
				this.classSelect = 0;
				this.space_id = '';
				this.class_id = '';
				this.is_goods = '1';
				this.init();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection);
			},
			del(type, id) {
				if (this.multipleSelection.length == 0) {
					return;
				}
				//type 0单个删除 1	批量删除
				let data = '';
				this.$confirm('确定删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						if (type == 0) {
							data = {
								goods_id: id
							};
						} else if (type == 1) {
							data = {
								goods_id: ''
							};
							this.multipleSelection.forEach(item => {
								data.goods_id += item.goods_id + ',';
							});
							data.goods_id = data.goods_id.substr(0, data.goods_id.length - 1);
						}
						console.log(data);
						this.$http(this.$ApiList.DeleteGoods, data).then(res => {
							this.$layer.msg('删除成功');
						});
						this.page = 1;
						this.init();
					})
					.catch(() => {});
			},
			// 商品详情
			goodsDetails(goodsId) {
				this.$router.push({
					path: '/goods_details',
					query: {
						type: 1,
						id: goodsId
					}
				});
			},
			getGoodsList(type) {
				this.goodsListType = type;
				this.refreshPage();
			},
			getClassify() {
				// 风格
				this.$http(this.$ApiList.StyleList).then(res => {
					this.styleList = res.datas;
				});
				// 空间
				this.$http(this.$ApiList.SpaceList).then(res => {
					this.spaceList = res.datas;
				});
				// 品类
				this.$http(this.$ApiList.ClassList).then(res => {
					this.classList = res.datas.reverse();
				});
			},
			edit(id, is_examine) {
				if (is_examine == 1) {
					this.$layer.msg('该商品在审核中，禁止重复修改');
					return;
				}
				this.$router.push({
					path: '/edit_goods',
					query: {
						id: id
					}
				});
			},
			postSort(sort, goods_id) {
				if (sort < 0 || sort === "") {
					this.$layer.msg('请输入正确的排序');
					return
				}
				this.setSortForm.sort = sort;
				this.setSortForm.goods_id = goods_id;

				this.$http(this.$ApiList.UpSortGoods, this.setSortForm).then(res => {});
			},
			exportDialog() {
				if (this.multipleSelection.length != 0) {
					this.offlineExport()
					return
				}
				this.dialogVisible = true
			},
			offlineExport() {
				let page = this.page - 1 ? this.page - 1 : 0
				let limit = this.limit
				let url =
					`${this.$domain}furniture/Adminexcel/GoodsGetData?is_sale=` +
					this.is_sale +
					'&goods_type=' +
					this.goods_type +
					'&class_id=' +
					this.class_id +
					'&style_id=' +
					this.style_id +
					'&space_id=' +
					this.space_id +
					'&store_id=' +
					localStorage.getItem('store_id') +
					'&page=' +
					page;


				if (this.multipleSelection.length != 0) {
					limit = this.multipleSelection.length
					let goods_id = ''
					this.multipleSelection.forEach(item => {
						goods_id += item.goods_id + ',';
					});
					goods_id = goods_id.substr(0, goods_id.length - 1);
					url = url + '&goods_id=' + goods_id
				} else if (this.classSelect == 2) {
					url = url + '&goods_id=' + this.selectContent
				}

				url = url + '&limit=' + limit;

				if (this.classSelect == 4) {
					url = url + '&factory_sn=' + this.selectContent
				} else if (this.classSelect == 6) {
					url = url + '&goods_sn=' + this.selectContent
				}

				window.location.href = url;
			},
			AddMyGoods() {
				if (this.multipleSelection.length == 0) {
					return;
				}
				let data = {
					goods_id: '',
					store_id: localStorage.getItem('store_id')
				}

				this.multipleSelection.forEach(item => {
					data.goods_id += item.goods_id + ',';
				})

				data.goods_id = data.goods_id.substr(0, data.goods_id.length - 1);
				this.$http(this.$ApiList.BAddGoods, data).then(res => {
					this.$layer.msg(res.datas);
				});
			},
			goodsCustomized(index, is_customized, goods_id) {
				let data = {
					goods_id: goods_id,
					is_customized: is_customized
				}
				this.$http(this.$ApiList.GoodsCustomized, data).then(res => {
					this.goodsList[index].is_customized = is_customized
					this.$layer.msg(res.datas);
				});
			},
			// 复制商品
			GoodsCopy(goods_id) {
				this.$http(this.$ApiList.GoodsCopy,{goods_id: goods_id}).then(res => {
					this.$layer.msg(res.datas);
					this.init()
				});
			},
			setSelectValue(obj){
				const { type,value } = obj
				switch (type) {
					case 'style_id':
					this.style_id = value
					break;
					case 'space_id':
						this.space_id = value
						break
					case 'class_id':
						this.class_id = value
						break
					case 'is_sale':
						this.is_sale = value
						break
					case 'is_goods':
						this.is_goods = value
						break
					case 'order_by':
						this.order_by = value
						break
					case 'goods_type':
						this.goods_type = value
						break
					default:
					break;
				}
				this.init()
			}
		},
		created() {
			this.getGoods();
			this.init();
			this.getClassify();
		}
	};
</script>
<style lang="scss">
	.goods_list {

		.btn-group {
			display: flex;
			margin-top: 10px;
		}

		.btn-group .btn-item {
			margin-right: 10px;
		}

		.client-view {
			margin-right: 10px;
			width: 120px;
		}

		.user-info .el-avatar {
			display: block;
			margin: 0 auto;
		}

		.info-exhibition {
			margin-top: 20px;
		}

		.info-exhibition p {
			text-align: center;
			line-height: 30px;
		}
	}
</style>
